<template>
  <el-dialog title="附近门店配置" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :inline="true">
      <div class="search-area">
        <div>
          <el-form-item label="部门编码" prop="deptCode">
            <el-input v-model="dataForm.deptCode" placeholder="部门编码" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="deptCode">
            <el-input v-model="dataForm.deptName" placeholder="部门名称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="门店列表是否可见">
            <el-select v-model="dataForm.showFlag">
              <el-option label="可见" :value="1"></el-option>
              <el-option label="不可见" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否可预约">
            <el-select v-model="dataForm.appointmentFlag">
              <el-option label="可预约" :value="1"></el-option>
              <el-option label="不可预约" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
            <el-button type="default" icon="el-icon-delete" @click="searchReset">清空</el-button>
          </el-form-item>
        </div>
      </div>

      <div class="content-list">
        <el-table :data="tableData" stripe style="width: 100%" height="calc(100vh - 200px)">
        	<el-table-column prop="date" label="编号" header-align="center" align="center" width="60"></el-table-column>
        	<el-table-column prop="date" label="部门名称" header-align="center" align="center" min-width="180"></el-table-column>
        	<el-table-column prop="date" label="电话" header-align="center" align="center" min-width="180"></el-table-column>
        	<el-table-column prop="date" label="地址" header-align="center" align="center" min-width="180"></el-table-column>
        	<el-table-column prop="date" label="微信是否可见" header-align="center" align="center" width="180"></el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <el-table-column label="编辑" header-align="center" align="center">
              <template slot-scope="scope">
              	<el-button @click="deptModifyHandle(scope.row)" type="text">编辑</el-button>

              </template>
            </el-table-column>

            <el-table-column label="是否可见" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text">可见</el-button>
                <el-button @click="handleClick(scope.row)" type="text">不可见</el-button>
              </template>
            </el-table-column>
            <el-table-column label="预约" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text">可预约</el-button>
                <el-button @click="handleClick(scope.row)" type="text">不可预约</el-button>
              </template>
            </el-table-column>
            <el-table-column label="实景图" header-align="center" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text">上传实景图</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>

      <div class="paging-area">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageIndex"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="totalPage">
        </el-pagination>
      </div>
    </el-form>

    <modify-dept v-if="modifyVisible" ref="modifyDialog" @refreshDataList="getDataList"></modify-dept>

  </el-dialog>
</template>

<script>
  import ModifyDept from './ModifyDept'
  export default {
    data() {
      return {
        visible: false,
        modifyVisible: false,
        dataForm: {
          deptCode: '',
          deptName: '',
          showFlag: '',
          appointmentFlag: ''
        },
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          },{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        pageIndex: 1,
        pageSize: 100,
        totalPage: 500
      }
    },
    components: {
      ModifyDept
    },
    methods: {
      init(){
        this.visible = true
      },
      // 查询
      searchChange(){

      },
      // 清空
      searchReset(){

      },
      // 获取数据列表
      getDataList(){

      },
      handleClick(){

      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      },
      // 部门编辑
      deptModifyHandle(data){
        this.modifyVisible = true
        this.$nextTick(() => {
          this.$refs.modifyDialog.init()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .search-area {
    background-color: #d8e6db;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 10px;
  }
  .content-list {
    height: calc(100vh - 200px);
    overflow-y: auto;
    margin-bottom: 10px;
  }
  .paging-area {
    background-color: #d8e6db;
    padding: 10px;
  }
</style>
